<template>
<!-- 查询表单 -->
<div class="app-container">
    <el-form :inline="true" :model="newBudget" class="demo-form-inline" v-show="showSearch">
  <el-form-item label="所属机构">
     <el-select  v-model="params.budgetDeptId" placeholder="请选择归属部门"  >    
      <el-option v-for="dept in depts" :label="dept.deptName" :value="dept.deptId" :key="dept.deptId"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="预选项目类别名称">
     <el-input v-model="params.budgetName" placeholder="请输入预算项目类别名称"></el-input>
  </el-form-item>
   <el-form-item label="状态">
     <el-select v-model="params.budgetStatus" >
      <el-option label="正常" valu e="0"></el-option>
      <el-option label="停用" value="1"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery()">查询</el-button>
    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
  </el-form-item>
</el-form>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
    <el-button type="primary" size="mini" plain
              icon="el-icon-plus" @click="onSubmit">新建</el-button>
  </el-col>
  
  <el-col :span="1.5">
    <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"

            >导入</el-button>

    </el-col>
  

    <el-col :span="1.5">
    <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"

            >导出</el-button>
             </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
  </el-row>
  
  
  
  <!-- 显示列表 -->
  <el-table
    :data="budgetTable"
    stripe
    style="width: 100%"
    :default-sort = "{prop: 'budgetCoding', order: 'descending'}"
    >
    <el-table-column
      prop="depts.deptName"
      label="所属机构"
      width="180"
      sortable>
    </el-table-column>
    <el-table-column
      prop="budgetCoding"
      label="编码"
      width="180"
      sortable>
    </el-table-column>
    <el-table-column
      prop="budgetName"
      label="名称"
      sortable>
    </el-table-column>
    <el-table-column
      prop="budgetStatus"
      label="状态"
      sortable>

      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.budgetStatus==0">正常</el-tag>
        <el-tag type="danger" v-if="scope.row.budgetStatus==1">停用</el-tag>        
      </template>
    </el-table-column>
    <el-table-column
      prop="operation"
      label="操作">
       <template slot-scope="scope">
        <el-button type="text" size="small" @click="updateBud(scope.row)"  >编辑</el-button>   
        <el-button @click="vieBud(scope.row)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="getList"
            style="float:right;"
          />
      </el-row>


  <!-- 查看 -->
  <el-drawer
  title="预算详情"
  :visible.sync="drawer"
  :with-header="false">
  <span>预算详情</span>

  <el-form ref="form1" :model="form2" label-width="100px" size="mini">
        <el-row>
          <el-col :span="24">
             <el-form-item  label="所属机构：">{{ this.dtn.deptName}}</el-form-item> 
          </el-col>
          <el-col :span="24">
            <el-form-item label="编码：">{{ form2.budgetCoding }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称：">{{ form2.budgetName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：">
              <div v-if="form2.budgetStatus == 0">正常</div>
              <div v-else-if="form2.budgetStatus == 1">停用</div>
            </el-form-item>
          </el-col>

          

        </el-row>
      </el-form>
</el-drawer>
  <!-- 新增预算 -->
<el-dialog :title="this.title" :visible.sync="dialogFormVisible">
  <el-form :model="newBudget" :rules="rules" ref="form1" class="frame" label-width="130px"> 
    <el-form-item label="所属机构" prop="budgetDeptId" >
      <el-select v-model="newBudget.budgetDeptId" placeholder="请选择活动区域">
        <el-option v-for="dept in depts" :label="dept.deptName" :value="dept.deptId" :key="dept.deptId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="项目类别编码" prop="coding"  >
      <el-input v-model="newBudget.budgetCoding" autocomplete="off"  placeholder="请输入" ></el-input>
    </el-form-item>
    <el-form-item label="项目类别名称" prop="budgetName">
      <el-input v-model="newBudget.budgetName" autocomplete="off" placeholder="请输入"></el-input>
    </el-form-item>
     <el-form-item label="状态" prop="budgetStatus">
        <el-radio-group v-model="newBudget.budgetStatus">
          <el-radio :label="0" >正常</el-radio>
          <el-radio :label="1" >停用</el-radio>
      </el-radio-group>
  </el-form-item>
  </el-form> 
  <div slot="footer" class="dialog-footer">
    <el-button @click="clear()">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </div>
</el-dialog>

 <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>


    </div>
    
</template>

<script>
import {queryDept, querAll,saveBud,updateBud,queryById} from '@/api/system/budgeta';
import { getToken } from "@/utils/auth";
export default {
    name: 'RuoyiUiIndex',

    data() {
      // 定义表单验证规则
      var checkCoding = (rule, value, callback)=>{
        var value1= this.newBudget.budgetCoding;
        if(!value1){ 
          return callback(new Error("编码为必填项，请输入"))
        }
        this.value = value1;
      };
        return {
          // 显示搜索条件
          showSearch: true,
          dtn:'',
          total:0,
          value:undefined,
          newBudget:{},
          rules:{ 
            coding: [
            { required: true, validator: checkCoding, trigger: 'blur' }
          ]
          },
          // 用户导入参数
            upload: {
        // 是否显示弹出层（用户导入）
             open: false,
        // 弹出层标题（用户导入）
             title: "",
        // 是否禁用上传
             isUploading: false,
        // 是否更新已经存在的用户数据
             updateSupport: 0,
        // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
             url: process.env.VUE_APP_BASE_API + "budget/importData"
      },

          // 部门名称
            depts:[], 
            //新增列表
            newBudget: { 
              budgetDeptId:undefined,
              budgetCoding:undefined,
              budgetName : undefined,
              budgetStatus :undefined,
            },
            // 显示列表
            budgetTable: null,
            // 新增页面是非显示
            dialogFormVisible :false,
            // 分页相关配置
            params:{
              pageNum: 1,
              pageSize: 10,
              budgetDeptId:undefined,
              open: false
            },
        title: "",
        // 查看抽屉
        drawer : false,
        form2:{ }
      }
            
        
    },

    mounted() {
      this.getList(); 
      this.deptQuery();
    },
    methods: {
      // 列表查询
       getList(){
           this.loading=true;
           querAll(this.params).then(response => {
              this.budgetTable = response.rows;  
              console.info(response) 
              this.total = response.total;
              this.loading = false;
        })
       } ,

    /** 查询所有的部门名称 */
    deptQuery(){
        queryDept().then(response => {
          console.info(response.data)
          this.depts = response.data;
      });

    },
 /** 搜索按钮操作 */
      handleQuery() {
        this.params.pageNum = 1;
        this.getList();
      },
        /** 重置搜索框的内容  */
    resetQuery(){
        this.params={}
        this.params.pageNum=1
        this.getList() 
    },
    /**
     * 新增
     */
    onSubmit(){ 
        this.clear()
         this.title="新增"
         this.dialogFormVisible = true           
    },
    /**
     * 编辑
     */
    updateBud(row){ 
        queryById(row.id).then(response =>{ 
            this.newBudget={},
            // console.info(response)
            this.newBudget = response.data;
            console.info(this.newBudget)
           // alert(JSON.stringify(this.newBudget))
           // console.info(this.newBudget)
            this.title="修改"
            this.dialogFormVisible = true;
        })    
    },
  
    /**
     * 保存功能
     */
    // submitFor: function() {
    //   this.$refs['form1'].validate(valid=>{
    //       if(valid){
    //         console.info(this)
    //         saveBud(this.newBudget).then(resp=> {
    //             if (resp.result) {
    //               this.$modal.msgSuccess("保存成功");
    //             }
    //             this.dialogFormVisible = false
    //             this.getList()
    //             this.newBudget = {}
    //       });
    //     } else {
    //         console.log('error submit!!');
    //         return false;
    //     }
    //   });
    //  },
    submitForm: function() {
        this.$refs["form1"].validate(valid => {
          if (valid) {
            if (this.form1.budgetCoding != undefined) {
              updateBud(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              saveBud(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.queryParams={}; 
                this.getList();
              });
            }
          }
        });
      },
      /**
       * 清空新增框
       */
      clear(){ 
        this.newBudget = {},
        this.dialogFormVisible = false
      },
      /**
       * 查看详情
       */
      vieBud(row){ 
           this.drawer = true,
            queryById(row.id).then(response =>{
             // console.info(response)
               this.form2 = response.data;
               //alert(this.form2)
               console.info(this.form2.budgetStatus)
               this.dtn = this.form2.sysDept
               this.title = "查看"
               this.drawer = true;
            })
      },
        /**
         * 导出按钮操作
         */
        handleExport(){ 
            this.download('aqsc/budgetaccount/export',{
               ...this.params,
              
            },`budget_${new Date().getTime()}.xlsx`)
            console.info(this.params)
        },

        /**
         * 导入按钮操作
         */
        handleImport() {
          this.upload.title = "预算字典导入";
          this.upload.open = true;
          },


        /** 下载模板操作 */
        importTemplate() {
          this.download('aqsc/budgetaccount/importTemplate', {
           }, `budget_template_${new Date().getTime()}.xlsx`)
        },

            // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }

  
        
   }
}


</script>

<style lang="scss" scoped>
.frame{
    .el-form-item {
      .el-input {
        width: 300px;
      }
      .el-select{
        width: 300px;
      }
    }
  }

</style>